<!doctype html>
<html lang="en">
<head>
	<title>LineChart - DateTime</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$("#wijdatelinechart").wijlinechart({
				showChartLabels: false,
				hint: {
					content: function () {
						return this.y;
					}
				},
				header: {
					text: "World of Warcraft Players by Region"
				},
				seriesList: [
					{
						label: "North America",
						legendEntry: true,
						data: {
							x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
							y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
						},
						markers: {
							visible: true,
							type: "circle"
						}
					},
					{
						label: "Europe",
						legendEntry: true,
						data: {
							x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
							y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
						},
						markers: {
							visible: true,
							type: "circle"
						}
					},
					{
						label: "Asia",
						legendEntry: true,
						data: {
							x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
							y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
						},
						markers: {
							visible: true,
							type: "circle"
						}
					}
				],
				seriesStyles: [{
					stroke: "#afe500", "stroke-width": 5, opacity: 0.8
				}, {
					stroke: "#959595", "stroke-width": 5, opacity: 0.8
				}, {
					stroke: "#2d2d2d", "stroke-width": 5, opacity: 0.8
				}],
				seriesHoverStyles: [{
					"stroke-width": 8, opacity: 1
				}, {
					"stroke-width": 8, opacity: 1
				}, {
					"stroke-width": 8, opacity: 1
				}]
			});

			var resizeTimer = null;

			$(window).resize(function () { 
				window.clearTimeout(resizeTimer);
				resizeTimer = window.setTimeout(function () {
					var jqLine = $("#wijdatelinechart"),
						width = jqLine.width(),
						height = jqLine.height();

					if (!width || !height) {
						window.clearTimeout(resizeTimer);
						return;
					}

					jqLine.wijlinechart("redraw", width, height);
				}, 250);
			});
		})
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				DateTime</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="wijdatelinechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
This sample demonstrates how to add dates with corresponding data to a line chart.
			</p>
		</div>
	</div>
</body>
</html>
